import React from 'react'
import {withRouter,} from 'react-router-dom'
import {connect,} from 'react-redux'
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import TabWithCustomUnderline from "../../layouts/TabWithCustomUnderline/TabWithCustomUnderline";
import './intelligence.css'


class Intelligence extends React.Component {

    constructor(props) {
        super(props)
        this.matchId = this.props.match.params.gameId
    }

    componentDidMount() {
        this.fetchGameIntelligence(this.matchId)
    }

    fetchGameIntelligence = (id) => {
        return this.props.doFetchGameIntelligence({id})
    }

    renderInfo = (data) => {
        const colorMapper = {
            'good': '#FF4F72',
            'bad': '#36C8B9',
            'neutral': '#FFA500',
        }
        const titleMapper = {
            'good': '有利情报',
            'bad': '不利情报',
            'neutral': '中立情报',
        }
        const indexToChineseMapper = {
            0: '一',
            1: '二',
            2: '三',
            3: '四',
            4: '五',
            5: '六',
            6: '七',
            7: '八',
            8: '九',
            9: '十',
        }
        // const
        let entries = Object.entries(data)
        let template = entries.map(([key, value,], index,) => {
            const color = colorMapper[key]
            const title = titleMapper[key]
            return (
                <div className="invite-item-container" key={index}>
                    <p style={{color: color,}}>{title}</p>
                    {value.map(([level, info,], index) => {
                        const infoCHIndex = indexToChineseMapper[index]
                        return <p key={index} style={{lineHeight: '20px',}}>{`情报${infoCHIndex}：`}<br/>{info}</p>
                    })}
                </div>
            )
        })
        return template
    }

    render() {

        const intelligence = this.props.currentGame.intelligence
        const info = intelligence.info
        const home = {
            good: info.good.home,
            bad: info.bad.home,
            neutral: info.neutral,
        }
        const away = {
            good: info.good.away,
            bad: info.bad.away,
            neutral: info.neutral,
        }



        return <GoBackLayout
            mainTitle='情报'
            history={this.props.history}
            navBarStyle={{
                position: 'fixed',
                top: 0,
                left: 0,
                zIndex: 9999,
                width: '100%',
            }}
        >
            <div style={{marginTop: '46px',}}>
                <TabWithCustomUnderline
                    tabBarUnderlineStyle={{
                        background: '#36C8B9',
                    }}
                    tabs={[
                        {title: '主队',},
                        {title: '客队',},
                    ]}
                >
                    <div>
                        {this.renderInfo(home)}
                    </div>
                    <div>
                        {this.renderInfo(away)}
                    </div>

                </TabWithCustomUnderline>
            </div>

        </GoBackLayout>
    }
}

const mapState = state => ({
    currentGame: state.game.currentGame,
})

const mapDispatch = dispatch => ({
    doFetchGameIntelligence: (payload) => dispatch.game.doFetchGameIntelligence(payload),
})


export default connect(
    mapState,
    mapDispatch,
)(withRouter(Intelligence))